<template>

    <!-- 
     v-model =>选中的值
      :key
      :label
      :value

     -->

    <!-- 1处理动态样式 
      (1)placeholder =>
       (2) icon  =>自己封装 下拉选择 =》ui图  效果在 element  ui中没有
    -->


    <div class="wselect">
        <!-- 我怎么知道用户选择了数据 -->
        <div class="zujian"> <i class="iconfont icon-zujianliebiao"></i></div>
        <el-select @change="change" v-model="value" class="m-2" :disabled="disabled" :placeholder="value||placeholder" size="large">
            <el-option v-for="item in optionsDatas" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

defineProps({
    placeholder: {
        type: String,
        default: '请选择'
    },
    optionsDatas: {
        type: Object || Array,
        default: [
            {
                value: 'Option1',
                label: 'Option11',
            },
            {
                value: 'Option22',
                label: 'Option2',
            },
        ]
    },
    disabled:{
        type:Boolean,
        default:false
    },
    value:{
        type:String,
        

    }
})
 
//在组件给父组件数据
 let emits =  defineEmits(['getSelectItem'])

const change = (val:any)=>{
   console.log(val,555568);
   
   emits('getSelectItem',val)
}
</script>

<style scoped lang="scss">
.wselect {
    position: relative;
    margin-right: 30px;

    .zujian {
        position: absolute;
        right: -10px;
        z-index: 1001;
        color: aqua;
        top: -10px;
    }
}
</style>